<template>
	<view class="searchResult wrapperLayer">
		<view class="backTitlebar-wrapper colCen borderBox">
			<view class="fixedBox">
				<view class="topbarbox"></view>
				<view>
					<view class="headerNavigationbar rowCenBet borderBox">
						<view class="leftContent rowCen">
							<view class="backIcon rowCenSta" @click="backUrl()">
								<image src="@/static/images/home/return.png" mode=""></image>
							</view>
							<view class="search-container rowCenCen borderBox" @click="gosearch()">
								<input class="searchInput" type="text" v-model="searchText"
									placeholder-class='searchplaceHolder' />
							</view>
						</view>
						<!-- 切换布局方式 -->
						<view class="typeSetting-btn defIcon" @click="changeSet()">
							<image v-if="rowset" src="../../static/images/goods/row.png" mode=""></image>
							<image v-else src="../../static/images/goods/col.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="onlineStore-container rowCen">
					<view class="onlineStoreList rowSta" v-if="!appinfo || platform!='ios'">
						<block v-for="(items,index) in onlineStoreList" :key="index">
							<view class="store-items colCen" :class="storeCurrent==index?'store-items-active':''"
								@click="checkstore(index)">
								<view class="store-name">
									{{items.name}}
								</view>
								<view class="bordercontent"></view>
							</view>
						</block>
					</view>
				</view>
				<view class="sortbar-container rowCenBet borderBox">
					<block v-for="(items,index) in sortList" :key="index">
						<view class="sortItems-container rowCenCen"
							:class="sortCurrent==index?'sortItems-container-active':''" @click="selectSort(index)">
							<view class="sortname">
								{{items.sortname}}
							</view>
							<view class="defIcon directionbox" v-if="index==2">
								<image v-if="sortCurrent!=2 "
									src="https://cmsstatic.ffquan.cn//wap_new/search/images/sort.svg" mode=""></image>
								<block v-else>
									<image v-if="saleUp"
										src="https://cmsstatic.ffquan.cn//wap_new/search/images/asce.svg" mode="">
									</image>
									<image v-else src="https://cmsstatic.ffquan.cn//wap_new/search/images/desc.svg"
										mode=""></image>
								</block>
							</view>
						</view>
					</block>
					<view class="couponSort colCen" v-if="storeCurrent>0">
						<view class="leftContent rowCen" @click="couponClick()">
							<view v-if="selectCoupon" class="defIcon icon-box">
								<image src="../../static/images/home/select.png" mode="aspectFill"></image>
							</view>
							<view class="nocoupon" v-else></view>
							<view class="textContent">
								优惠券
							</view>
						</view>
					</view>
					<view class="couponSort colCen" v-if="storeCurrent==1">
						<view class="leftContent rowCen" @click="selfsupportClick()">
							<view v-if="selfsupport" class="defIcon icon-box">
								<image src="../../static/images/home/select.png" mode="aspectFill"></image>
							</view>
							<view class="nocoupon" v-else></view>
							<view class="textContent">
								自营
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="placeBox">
				<view class="topbarbox"></view>
				<view class="placeemptybox"></view>
			</view>
		</view>

<!-- /**
 * 声明：
		此代码为西瓜猪淘客APP导购版本
		@本程序受法律保护，著作权©软著登记号2021SRA006390 < 未经版权所有权人书面许可，不能用于商业用途！>
		获取许可 WeChat：shenlailai6   QQ：212156620   Email： admin.java3.cn
		本程序仅用作被授权人二次开发,以及被授权人上架运营使用，未经版权所有权人书面许可，不能自行用于商业用途
 */ -->

		<view class="pageContent-container colCen">
			<view class="advert-container colCenCen borderBox" v-if="advertList.length>0">
				<swiper class="picbox" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(items,index) in advertList" :key="index">
						<view class="picbox defIcon" @tap='goUrl(items)'>
							<image :src="items.pic" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			
			<view class="goodsList-container" :style="'background-color:'+(rowset?'':'#fff')">
				<!-- 横着排列 -->
				<view class="bottomGoods-list-container rowCenBet borderBox" v-if="rowset">
					<block v-for="(items,index) in goodsList" :key='index' >
						<view class="goods-items-cards colCen borderBox" @click="goDetail(items)">
							<view class="goodspic-container defIcon">
								<image :src="items.mainPic | imgSrc" mode="aspectFill"></image>	
							</view>
							<view class="bottominfo-container colCen">
								<view class="trade-name-container rowSta">
								<!-- 	<view class="typeIcon-content defIcon" v-if="items.searchSource ==1">
										<image v-if="items.shopType==0" src="@/static/images/goods/tbtips.png" mode="heightFix"></image>
										<image v-else src="@/static/images/goods/tmtips.png" mode="heightFix"></image>
									</view>
									<view class="typeIcon-content defIcon" v-if="items.searchSource ==2">
										<image src="@/static/images/goods/pddtips.png" mode="heightFix"></image>
									</view>
									<view class="typeIcon-content defIcon" v-if="items.searchSource ==3">
										<image src="@/static/images/goods/jdtips.png" mode="heightFix"></image>
									</view>
									<view class="typeIcon-content defIcon">
										<image :src="items.icon" mode="heightFix"></image>
									</view> -->
									
									<view class="typeIcon-content defIcon">
										<image :src="items.icon" mode="heightFix"></image>
									</view>
									

									<view class="tradename">
										{{items.dtitle}}
									</view>
								</view>

								<view class="discounts-container rowCen borderBox rowEndBet">
									<view class="left-price-box rowEnd">
										<text class='greytxt'>券后</text>
										<text class='rmb'>￥</text>
										<text class='pricebox'>{{items.actualPrice}}</text>
									</view>
									<view class="juan" v-if="items.couponPrice>0">
										<text>券</text>
										{{items.couponPrice}}元
									</view>
								</view>

								<view class="price-saleNums-container rowEndBet">
									<view class="right-price-box">
										已售{{items.monthSales}}
									</view>
									<view class="shopname rowEnd">
										<text class='shop'>{{items.shopName | shopname}}</text>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<!-- 竖着排列  -->
				<view class="colSetting-container colCen" v-else>
					<view class="listbox colCen borderBox">
						<block v-for="(items,index) in goodsList" :key="index">
							<view class="goods-items-container rowCen borderBox" @click="goDetail(items)">
								<view class="left-imagecontent defIcon">
									<image :src="items.mainPic | imgSrc" mode="aspectFill"></image>
								</view>

								<view class="right-goodsinfo-container colCenBet borderBox">
									<view class="goodsnameinfo-content rowCen">
										<!-- <view class="typeIcon-content defIcon" v-if="items.searchSource ==1">
											<image v-if="items.shopType=='0'" src="@/static/images/goods/tbtips.png"
												mode="heightFix"></image>
											<image v-else src="@/static/images/goods/tmtips.png" mode="heightFix">
											</image>
										</view>
										<view class="typeIcon-content defIcon" v-if="items.searchSource ==2">
											<image src="@/static/images/goods/pddtips.png" mode="heightFix"></image>
										</view>
										<view class="typeIcon-content defIcon" v-if="items.searchSource ==3">
											<image src="@/static/images/goods/jdtips.png" mode="heightFix"></image>
										</view> -->
										<view class="typeIcon-content defIcon">
											<image :src="items.icon" mode="heightFix"></image>
										</view>
										<text class="tradename-title">
											{{items.dtitle}}
										</text>
									</view>

									<view class="cardbottom-container colCenEnd">
										<view class="discounts-container rowCen borderBox">
											<view class="juan" v-if="items.couponPrice>0">
												<text>券</text>
												{{items.couponPrice}}元
											</view>
											<!-- <view class="back-box rowCenCen">
												<view>
													返{{items.backmoney}}元
												</view>
											</view> -->
										</view>
										<view class="price-saleNums-container rowEnd">
											<span class='greytxt'>券后</span>
											<span class='rmb'>￥</span>
											<span class='pricebox'>{{items.actualPrice}}</span>
										</view>
										<view class="shopEnter-bar rowEndBet">
											<view class="saleNum-content">
												已售{{items.monthSales}}
											</view>
											<view class="storename">
												{{items.shopName | shopname}}
											</view>
											<!-- <view class="enterbtn rowCen"> 
												<view class="enterStore">进店</view>
												<view class="defIcon arrow">
													<image src="../../static/images/goods/entershop.png" mode=""></image>
												</view>
											</view> -->
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>

			<aLoadMore :status="loadstatus" mode="loading3" :showTitle='true' color="#999999"></aLoadMore>
		</view>

		<!-- pdd -->
		<u-popup v-model="pddempowerModel" mode="center" border-radius="12">
			<pddEmpower @closemodel='closeMdl'></pddEmpower>
		</u-popup>
	</view>
</template>

<script>
	import utils from '../../utils/utils.js'
	import pddEmpower from '../../components/pddempower.vue'
	export default {
		components: {
			pddEmpower
		},
		data() {
			return {
				memberId: '',
				appinfo: false,
				pddempowerModel: false,
				searchText: '',
				storeCurrent: '',
				sortCurrent: '',
				rowset: true,//方式，默认竖着排列，true为横着排列
				advertPic: '',
				onlineStoreList: [{
						name: '淘宝',
						type: 'tb'
					},
					{
						name: '京东',
						type: 'jd'
					},
					{
						name: '拼多多',
						type: 'pdd'
					},
					{
						name: '唯品会',
						type: 'vip'
					}
				],

				sortList: [{
						sortname: '人气',
					},
					{
						sortname: '销量',
					},
					{
						sortname: '价格',
					}
				],
				saleUp: false,
				sortType: 'renqi',
				selectCoupon: false,
				selfsupport: false,


				goodsList: [],
				advertList: [],
				loadstatus: 'loading',
				canloadmore: false,

				platform: '',
				currentPage: 1,
			}
		},
		onLoad(options) {
			if (getApp().globalData.userInfo.memberId) {
				this.memberId = getApp().globalData.userInfo.memberId
			}
			this.appinfo = getApp().globalData.appinfo.iosExamine;
			this.platform = getApp().globalData.platform
			this.searchText = options.searchText
			this.storeCurrent = options.storetype
			this.getbanner()
			this.$nextTick(() => {
				if (this.storeCurrent == 0) {
					this.getTbData()
				} else if (this.storeCurrent == 1) {
					this.getJdData()
				} else if (this.storeCurrent == 2) {
					this.getPddData()
				} else if (this.storeCurrent == 3) {
					this.getWphData()
				}
			})
		},

		onReachBottom() {
			if (this.canloadmore) {
				if (this.storeCurrent == 0) {
					this.getTbData()
				} else if (this.storeCurrent == 1) {
					this.getJdData()
				} else if (this.storeCurrent == 2) {
					this.getPddData()
				} else if (this.storeCurrent == 3) {
					this.getWphData()
				}
			}
		},

		methods: {
			getTbData() {
				this.$http.post('tb/taobaoSuperSearch', {
					keyWords: this.searchText,
					memberId: this.memberId,
					pageId: this.currentPage,
					pageSize: 10,
					sort: this.sortType,
				}, 'application/json').then(res => {
					console.log(res.goodsList, '=========>淘宝商品搜索结果');
					uni.stopPullDownRefresh();
					if (res.goodsList.length < 10) {
						this.canloadmore = false
						this.loadstatus = 'nomarl'
					} else {
						this.currentPage++
						this.canloadmore = true
						this.loadstatus = 'loading'
					}
					if (this.currentPage > 1) {
						this.goodsList = this.goodsList.concat(res.goodsList)
					} else {
						this.goodsList = res.goodsList
					}
				})
			},

			getJdData() {
				this.$http.post('jd/superSearch', {
					keyword: this.searchText,
					memberId: this.memberId,
					pageIndex: this.currentPage,
					owner: this.selfsupport ? 'g' : '',
					pageSize: 10,
					sort: this.sortType
				}, 'application/json').then((res) => {
					console.log(res, '=========>京东商品搜索结果');
					uni.stopPullDownRefresh();
					if (res.length < 10) {
						this.canloadmore = false
						this.loadstatus = 'nomarl'
					} else {
						this.currentPage++
						this.canloadmore = true
						this.loadstatus = 'loading'
					}
					if (this.currentPage > 1) {
						this.goodsList = this.goodsList.concat(res)
					} else {
						this.goodsList = res
					}
				})
			},
			gosearch() {
				uni.redirectTo({
					url:'./search?type='+this.storeCurrent
				})
			},

			goUrl(info) {
				utils.goUrl(info, this)
			},



			getPddData() {
				this.$http.post('pddgoods/superSearch', {
					keyWords: this.searchText,
					memberId: this.memberId,
					pageId: this.currentPage,
					withCoupon: this.selectCoupon,
					pageSize: 10,
					sort: this.sortType
				}, 'application/json').then((res) => {
					console.log(res, '=========>拼多多商品搜索结果');  
					uni.stopPullDownRefresh();
					if (res.goodsList.length >= 9 || (this.pageCurrent*this.pageSize < res.totalNum) ) { 
						
						this.currentPage++
						this.canloadmore = true
						this.loadstatus = 'loading'
					} else {
						this.canloadmore = false
						this.loadstatus = 'nomarl'
					}
					if (this.currentPage > 1) {
						this.goodsList = this.goodsList.concat(res.goodsList)
					} else {
						this.goodsList = res.goodsList
					}
				})
			},

			getWphData() {
				this.$http.post('vip/query', {
					keyword: this.searchText,
					page: this.currentPage,
					pageSize: 10,
					sort: this.sortType
				}, 'application/json').then((res) => {
					console.log(res, '=========>唯品会');
					uni.stopPullDownRefresh();
					if (res.length < 10) {
						this.canloadmore = false
						this.loadstatus = 'nomarl'
					} else {
						this.currentPage++
						this.canloadmore = true
						this.loadstatus = 'loading'
					}

					if (this.currentPage > 1) {
						this.goodsList = this.goodsList.concat(res)
					} else {
						this.goodsList = res
					}
				})
			},


			couponClick() {
				this.currentPage = 1
				this.goodsList = []
				this.selectCoupon = !this.selectCoupon
				if (this.storeCurrent == 0) {
					this.getTbData()
				} else if (this.storeCurrent == 1) {
					this.getJdData()
				} else if (this.storeCurrent == 2) {
					this.getPddData()
				} else if (this.storeCurrent == 3) {
					this.getWphData()
				}
			},

			selfsupportClick() {
				this.currentPage = 1
				this.goodsList = []
				this.selfsupport = !this.selfsupport
				this.getJdData()
			},

			getbanner() {
				this.$http.get('banner/list/0').then((res) => {
					console.log(res, '=========>广告数据');
					this.advertList = res
					this.advertPic = res[0].pic
				})
			},

			selectSort(idx) {
				this.sortCurrent = idx
				this.currentPage = 1
				this.goodsList = []
				if (idx == 0) {
					this.sortType = 'renqi'
				} else if (idx == 1) {
					this.sortType = 'total_sales_des'
				} else if (idx == 2) {
					this.saleUp = !this.saleUp
					if (this.saleUp) {
						this.sortType = 'price_asc'
					} else {
						this.sortType = 'price_des'
					}
				}


				this.$nextTick(() => {
					if (this.storeCurrent == 0) {
						this.getTbData()
					} else if (this.storeCurrent == 1) {
						this.getJdData()
					} else if (this.storeCurrent == 2) {
						this.getPddData()
					} else if (this.storeCurrent == 3) {
						this.getWphData()
					}
				})
			},

			checkstore(idx) {
			if (idx == 2) {
				const value = uni.getStorageSync('userInfo');
				console.log(value)
				if (value) {
					this.updataUser(idx)
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			} else {
				this.storeCurrent = idx
				this.loadstatus = 'loading'
				this.canloadmore = false
				this.sortType = 'renqi'
				this.currentPage = 1
				this.sortCurrent = 0
				this.selectCoupon = false
				this.selfsupport = false
				this.goodsList = []
				this.$nextTick(() => {
					if (this.storeCurrent == 0) {
						this.getTbData()
					} else if (this.storeCurrent == 1) {
						this.getJdData()
					} else if (this.storeCurrent == 2) {
						this.getPddData()
					} else if (this.storeCurrent == 3) {
						this.getWphData()
					}
				})
			}
			},
			updataUser(idx) {
				this.userInfo = utils.getCacheSync('userData')
				this.$http.get('member/getInfo').then((res) => {
					console.log(res, '========>获取用户信息');
					this.userInfo = res
					utils.setCache('userData', res)
					if (this.userInfo.pddAuthority == 1) {
						this.storeCurrent = idx
						this.loadstatus = 'loading'
						this.canloadmore = false
						this.sortType = 'renqi'
						this.currentPage = 1
						this.sortCurrent = 0
						this.selectCoupon = false
						this.selfsupport = false
						this.goodsList = []
						this.$nextTick(() => {
							this.getPddData()
						})
					} else {
						this.$http.get('pddgoods/checkPddAuth').then(res => {
							console.log(res);
							if (res.isAuth == 1) {
								this.storeCurrent = idx
								this.sortType = 'renqi'
								this.currentPage = 1
								this.sortCurrent = 0
								this.selectCoupon = false
								this.selfsupport = false
								this.goodsList = []
								this.$nextTick(() => {
									this.getPddData()
								})
							} else {
								this.pddempowerModel = true
								this.storeCurrent = 0
								this.loadstatus = 'loading'
								this.canloadmore = false
								this.sortType = 'renqi'
								this.currentPage = 1
								this.sortCurrent = 0
								this.selectCoupon = false
								this.selfsupport = false
								this.goodsList = []
								this.getTbData()
							}
						})
					}
				})
			},

			changeSet() {
				// 切换排版
				this.rowset = !this.rowset
				this.currentPage = 1
			},

			backUrl() {
				uni.navigateBack({
					delta: 1
				})
			},
			goDetail(info) {
				uni.navigateTo({
					url: '../goods/goodsDetail?info=' + encodeURIComponent(JSON.stringify(info))
				})
			},
			closeMdl() { 
				this.pddempowerModel = false
			}
		},
		filters: {
		    imgSrc: function (url) {
				if (url.indexOf('alicdn') >= 0){				
		            if (url.indexOf('.jpg') >= 0){
		                return url + '_310x310.jpg';
		            }else{
					    return url;
				    }
				}else if (url.indexOf('_310x310') >= 0){
					return url;
				}else{
					return url;
				}
		    },
			shopname: function (type) {
			    if (type.length >= 8) {					
			        return type.substring(0,8)+'...';			 
			    } else {
			        return type;
			    }
			}
		},
		onPullDownRefresh() {
			this.currentPage = 1
			this.goodsList = []
			if (this.storeCurrent == 0) {
				this.getTbData()
			} else if (this.storeCurrent == 1) {
				this.getJdData()
			} else if (this.storeCurrent == 2) {
				this.getPddData()
			} else if (this.storeCurrent == 3) {
				this.getWphData()
			}
		},

		

	}
</script>

<style lang="scss">
	@-webkit-keyframes fadeInOut {
		0% {
			opacity: 0;
		}

		25% {
			opacity: 0.5;
		}

		50% {
			opacity: 1;
		}

		75% {
			opacity: 1;
		}
	}

	.juan {
		height: 28rpx;
		background: linear-gradient(90deg, #ff8873 0, #ff4f4f 100%);
		border-radius: 4rpx;
		padding: 0 10rpx 0 2rpx;
		font-size: 19rpx;
		font-weight: 400;
		color: #fff;
		line-height: 28rpx;
	}

	.juan text {
		background: #fff;
		border-radius: 2rpx 0 0 2rpx;
		font-size: 20rpx;
		color: #FE3A33;
		margin: auto 10rpx auto 0;
		min-width: 24rpx;
		max-width: 24rpx;
		min-height: 24rpx;
		max-height: 24rpx;
		display: inline-block;
		line-height: 24rpx;
		text-align: center;
		vertical-align: middle;
		margin-top: -4rpx;
	}

	.searchResult {
		.backTitlebar-wrapper {
			.placeBox {
				.placeemptybox {
					height: 270rpx;
				}
			}

			.fixedBox {
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 100;
				background-color: #FFFFFF;

				.headerNavigationbar {
					width: 100%;
					height: 90rpx;
					padding: 0 20rpx;

					.leftContent {
						.backIcon {
							width: 40rpx;
							height: 32rpx;
							z-index: 1;

							image {
								width: 17rpx;
								height: 32rpx;
							}
						}

						.search-container {
							width: 554rpx;
							height: 70rpx;
							background: #F0F1F7;
							border-radius: 30rpx;
							padding: 0 20rpx;

							view {
								width: 554rpx;
								height: 70rpx;
								background: #F0F1F7;
								border-radius: 30rpx;
								font-size: 28rpx;
								padding: 0 20rpx;
								font-weight: 400;
								text-overflow: ellipsis;
								white-space: nowrap;
								overflow: hidden;
							}


							.searchInput {
								width: 90%;
								height: 100%;
								font-size: 24rpx;
								font-weight: 400;
								color: #222222;
							}
						}
					}

					.typeSetting-btn {
						width: 65rpx;
						height: 35rpx;

						image {
							width: 35rpx;
							height: 35rpx;
						}
					}
				}

				.onlineStore-container {
					width: 100%;
					height: 80rpx;
					background-color: #FFFFFF;
					padding: 0 20rpx;

					.onlineStoreList {
						width: 100%;
						height: 100%;

						.store-items {
							margin-right: 60rpx;

							.store-name {
								font-size: 28rpx;
								font-weight: 500;
								color: #999999;
								margin-top: 20rpx;
							}

							.bordercontent {
								width: 30rpx;
								height: 4rpx;
								margin-top: 10rpx;
								border-radius: 2rpx;
								background-color: transparent;
							}
						}

						.store-items-active {
							.store-name {
								font-size: 32rpx;
								font-weight: 500;
								color: #FF4242;
							}

							.bordercontent {
								width: 30rpx;
								height: 4rpx;
								background-color: #FF4242;
							}
						}
					}
				}

				.sortbar-container {
					z-index: 10;
					position: fixed;
					left: 0;
					width: 100%;
					height: 80rpx;
					background-color: #FFFFFF;
					padding: 0 50rpx;

					.sortItems-container {
						width: 90rpx;

						.sortname {
							font-size: 28rpx;
							font-weight: 400;
							color: #333333;
						}

						.directionbox {
							width: 25rpx;
							height: 35rpx;
							margin-left: 5rpx;
						}
					}

					.sortItems-container-active {
						.sortname {
							color: #FF4242;
						}
					}

					.couponSort {
						.leftContent {
							.nocoupon {
								width: 30rpx;
								height: 30rpx;
								background: #FFFFFF;
								border: 1rpx solid #BFBFBF;
								border-radius: 50%;
								margin-right: 10rpx;
							}

							.icon-box {
								width: 30rpx;
								height: 30rpx;
								margin-right: 10rpx;
							}

							.textContent {
								font-size: 28rpx;
								font-weight: 400;
								color: #333333;
							}
						}
					}
				}
			}
		}

		.pageContent-container {
			width: 100%;

			.advert-container {
				width: 100%;
				height: 200rpx;
				background-color: #FFFFFF;
				box-shadow: 0px -1rpx 0px 0px #EFF1F7;
				padding: 0 20rpx;
				margin-bottom: 16rpx;

				.picbox {
					width: 100%;
					height: 160rpx;
					border-radius: 12rpx;
					overflow: hidden;
				}
			}

			.goodsList-container {
				width: 100%;
				// background-color: #FFFFFF;

				.bottomGoods-list-container {
					width: 96%;
					margin: auto;
					flex-wrap: wrap;

					.goods-items-cards {
						width: 49%;
						//height: 520rpx;
						background-color: #FFFFFF;
						border-radius: 12rpx;
						margin-bottom: 16rpx;

						.goodspic-container {
							width: 100%;
							height: 360rpx;
							background-image: url(@/static/images/app/rolling.gif);
							background-position: 0% 0%;
							background-size: 100% 100%;
							-webkit-animation-name: fadeInOut;
							-webkit-animation-timing-function: ease-in-out;
							-webkit-animation-duration: 1.5s;

							image {
								border-radius: 12rpx 12rpx 0 0;

							}
						}

						.bottominfo-container {
							width: 100%;
							padding: 10rpx;

							.trade-name-container {
								width: 100%;
								margin-top: 10rpx;

								.typeIcon-content {
									width: 60rpx;
									height: 26rpx;
									margin-right: 4rpx;
									position: absolute;
									margin-top: 4rpx;
								}

								.tradename {
									flex: 1;
									font-size: 26rpx;
									line-height: 34rpx;
									font-weight: 500;
									text-indent: 2.5em;
									color: #333333;
									text-overflow: -o-ellipsis-lastline;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									line-clamp: 2;
									-webkit-box-orient: vertical;
								}
							}

							.discounts-container {
								width: 100%;
								margin: 20rpx 0;

								.left-price-box {
									.greytxt {
										font-size: 24rpx;
										font-weight: 400;
										color: #FF4242;
										line-height: 32rpx;
									}

									.rmb {
										font-size: 24rpx;
										font-weight: 600;
										color: #FF4242;
										line-height: 32rpx;
									}

									.pricebox {
										font-size: 32rpx;
										line-height: 34rpx;
										font-weight: 600;
										color: #FF4242;
									}
								}

								.coupon-box {
									width: 102rpx;
									height: 30rpx;
									background: url(@/static/images/goods/couponbac.png)no-repeat;
									background-size: 100% 100%;
									font-size: 20rpx;
									font-weight: 500;
									color: #FF4242;
								}

								.back-box {
									width: 100rpx;
									height: 30rpx;
									background: linear-gradient(-90deg, #7619EC, #A429F3);
									border-radius: 5rpx;
									margin-left: 8rpx;
									font-size: 20rpx;
									font-weight: 500;
									color: #FFFFFF;
								}
							}

							.price-saleNums-container {
								width: 100%;

								.shopname {
									.shop {
										font-size: 22rpx;
										font-weight: 400;
										color: #999999;
										line-height: 32rpx;
									}
								}

								.right-price-box {
									font-size: 22rpx;
									font-weight: 400;
									color: #999999;
								}
							}
						}
					}
				}

				.colSetting-container {
					width: 100%;

					.listbox {
						width: 100%;

						.goods-items-container {
							width: 100%;
							height: 240rpx;
							padding: 0 20rpx;
							border-top: 1rpx solid #f5f5f5;

							.left-imagecontent {
								width: 200rpx;
								height: 200rpx;
								border-radius: 8rpx;
								overflow: hidden;
							}

							.right-goodsinfo-container {
								margin-left: 20rpx;
								flex: 1;
								// width: 460rpx;
								height: 200rpx;
								.goodsnameinfo-content {
									display: flex;
									width: 100%;
									line-height: 32rpx;
									text-overflow: -o-ellipsis-lastline;
									overflow: hidden;				//溢出内容隐藏
									text-overflow: ellipsis;		//文本溢出部分用省略号表示
									display: -webkit-box;			//特别显示模式
									-webkit-line-clamp: 2;			//行数
									line-clamp: 2;					
									-webkit-box-orient: vertical;	//盒子中内容竖直排列
									.typeIcon-content {
										display: inline-block;
										width: 60rpx;
										height: 24rpx;
										margin-top: 8rpx;
									}

									.tradename-title {
										font-size: 28rpx;
										font-weight: 500;
										color: #333333;
									}
								}

								.cardbottom-container {
									width: 100%;

									.price-saleNums-container {
										width: 100%;
										line-height: 30rpx;
										margin-bottom: 16rpx;

										.greytxt {
											font-size: 20rpx;
											font-weight: 400;
											color: #999999;
											line-height: 30rpx;
										}

										.rmb {
											font-size: 20rpx;
											font-weight: bold;
											color: #FF4242;
											line-height: 30rpx;
										}

										.pricebox {
											font-size: 28rpx;
											line-height: 34rpx;
											font-weight: bold;
											color: #FF4242;
										}
									}

									.discounts-container {
										width: 100%;
										margin-bottom: 16rpx;

										.coupon-box {
											width: 102rpx;
											height: 30rpx;
											background: url(../../static/images/goods/couponbac.png)no-repeat;
											background-size: 100% 100%;
											font-size: 20rpx;
											font-weight: 500;
											color: #FF4242;
										}

										.back-box {
											width: 100rpx;
											height: 30rpx;
											background: linear-gradient(-90deg, #7619EC, #A429F3);
											border-radius: 5rpx;
											margin-left: 8rpx;
											font-size: 20rpx;
											font-weight: 500;
											color: #FFFFFF;
										}
									}

									.saleNum-content {
										//width: 100%;
										font-size: 20rpx;
										font-weight: 400;
										line-height: 34rpx;
										color: #999999;
									}

									.shopEnter-bar {
										width: 100%;
										line-height: 34rpx;

										.storename {
											font-size: 20rpx;
											font-weight: 400;
											color: #999999;
										}

										.enterbtn {
											.enterStore {
												font-size: 20rpx;
												font-weight: 400;
												color: #333333;
												margin: 0 5rpx;
											}

											.arrow {
												width: 6rpx;
												height: 12rpx;
												margin-top: 4rpx;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
